<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../html页面使用vue/0js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--            <a name="hello-world" href="#hello-world">-->
    <!--                Hello world!-->
    <!--            </a>-->
    <anchored-heading :level="dengji">Hello world!</anchored-heading>
</div>


<!--<script type="text/x-template" id="anchored-heading-template">
    <h1 v-if="level === 1">
        <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
        <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
        <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
        <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
        <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
        <slot></slot>
    </h6>

</script>-->
<script type="text/javascript">

    /* Vue.component('anchored-heading', {
         template: '#anchored-heading-template',
         props: {
             level: {
                 type: Number,
                 required: true
             }
         }
     })*/

    // 两种方式
    let apply = Array.apply(null, {length: 20});
    let array = new Array(20)
    for (let i = 0; i < array.length; i++) {
        array[i] = undefined
    }


    Vue.component('anchored-heading', {
        render: function (createElement) {
            console.log(createElement)
            console.log(this)
            return createElement(
                    // 创建一个h2标签
                    'h' + this.level,
                    [
                        createElement('a', {
                            attrs: {
                                name: "headingId",
                                href: '#' + "headingId"
                            }
                        }, this.$slots.default),

                        // h2标签 包含 下面的标签，生成20个虚拟dom数组放到这里
                        array.map(function () {
                            return createElement('p', 'hi')
                        })
                    ]
            )
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        }
    })

    new Vue({
        el: "#app",
        data() {
            return {
                dengji: 6
            }
        }
    })
</script>
</body>

</html>